<template>
	<view >
		<view class="container">
			<view class="main-containner">
				<view class="title">
					<input type="text" placeholder="输入标题" style="margin-left: 5%;margin-right: 5%; font-size: 36rpx;">
				</view>
				<!-- 输入信息 -->
				<textarea name="" :maxlength="-1" style="width: 100%; margin-top: 5%;" placeholder="输入商品内容"></textarea>
			</view>
			
			<!-- 选择图片后的展示区 -->
			<view class="des">温馨提示：第一张图片就是首页图</view>
			<view class="img">
			  <block v-for="(item,i) in img" :key="i">
			    <view class="img2">
			       <view @click="deletePic(i)" >x</view>
			       <image bindtap="previewImage" :src="item.tempFilePath"></image>
			    </view> 
			   </block>
			   <view v-if="img.length<9" bindtap="uploadToCloud" style="width: 190rpx;height: 190rpx;background-color: #efefef; margin-top: 30rpx;border-radius: 10px;" @click="selectPic">
				   <uni-icons type="plus" size="90" style="margin-left: 8rpx;"></uni-icons>
			   </view>
			</view>
			
			<!-- 设置价格和电话号码 -->
			<view class="last-containner">
				<view class="price" @click="setPrice">
					<view class="">
						￥价格
					</view>
					<view class="price-num">
						￥{{price}}<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="">
					
				</view>
			</view>
		</view>

		<view class="publish-container">
			<view class="publish">
				<button class="publish-button" @click="upload">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				img: [],
				price:0,
				policy:{}
			};
		},
		methods: {
			// 选择照片
			selectPic() {
				uni.chooseMedia({
					count: 9,
					mediaType: ["image"],
					success: res => {
						if(this.img.length==0){
							this.img = res.tempFiles;
						}else{
							this.img=this.img.concat(res.tempFiles);
						}
					}
				});
			},
			// 删除照片
			deletePic(e){
				this.img.splice(e,1);
				uni.setNa
			},
			 upload(e){
				 console.log(e)
				const policy=this.policy.policy;
				const ossAccessKeyId=this.policy.accessId;
				const signature=this.policy.signature;
				const key=this.img[0].tempFilePath;
					wx.uploadFile({
					  url: this.policy.host, // 开发者服务器的URL。
					  filePath: this.img[0].tempFilePath,
					  name: 'file', // 必须填file。
					  formData: {
					    key:'2023-05-14/test.jpg',
					    policy:policy,
					    OSSAccessKeyId: ossAccessKeyId,
					    signature:signature,
					    // 'x-oss-security-token': securityToken // 使用STS签名时必传。
					  },
					  success: (res) => {
						  console.log(res)
					    if (res.statusCode === 204) {
					      console.log('res');
					    }
					  },
					  fail: err => {
					    console.log(err);
					  }
					});
				
			},
			setPrice(){
				uni.showModal({
					title:"设置价格",
					editable:true,
					placeholderText:'价格需要大于0',
					success:res=>{
						if(res.confirm){
							let now=parseFloat(res.content);
							console.log(now)
							if(now.toString() == "NaN" || now<0){
								uni.showToast({
									icon:'error',
									title:"价格输入有误"
								})
								return ;
							}else{
								this.price=now;
							}
						}
					}
				})
			},
			async getPolicy(){
				const {data:res} = await uni.$http.get('/bbm/goods/oss/policy');
				this.policy=res.data;
				console.log(this.policy);
			}
		},
		onLoad() {
			this.getPolicy();
		}
	}
</script>

<style lang="scss">
	.publish-container{
		height: 120rpx;
	}
	.publish {
		position: fixed;
		bottom: 0;
		width: 80%;
		margin: 0 10%;
		height: 90rpx;
		.publish-button {
			background-color: #ffeb37;
		}
	}

	.main-containner {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;

		.title {
			width: 100%;
			background-color: #e2e2e29d;
			border-radius: 30rpx;
			line-height: 40rpx;
		}
	}
	.img{
	  margin-left: 37.5rpx;
	  width: 100%;
	  display: flex;
		flex-direction: row;
	   flex-wrap: wrap;
	   border-radius: 10px;

	}
	.img2{
		margin-top: 10rpx;
		margin-right: 37.5rpx;
	   width: 210rpx;
	   height: 210rpx;
	}
	.img2 view{
	  color: red;
	  z-index: 5;
	  position: relative; 
	  width: 20rpx;
	  height: 20rpx;
	  margin-top:0rpx;
	  margin-left: 90%;
	}
	.img2 image{
	  width: 190rpx;
	  height: 190rpx;
	  position: relative;
	  z-index: 5;
	}
	.des {
	  padding-left: 40rpx;
	  padding-top: 20rpx;
	  font-size: 26rpx;
	  color: #acacac;
	  letter-spacing: 2rpx;
	  line-height: 42rpx;
	}
	.last-containner{
		width: 90%;
		margin-top: 20rpx;
		margin-left: 5%;
		border-top: 2px #efefef solid;
		.price{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;
			.price-num{
				color: #e00000;
			}
		}
		
	}
	

</style>